<template>
	<view class="content">
		<uni-search-bar @confirm="doSearch" @input="" v-model="searchkey" />
		<div class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height: 100%;">
				<swiper-item v-for="(item,index) in selectionList" :key="index">
					<view class="swiper-item">
						<img :src="item.img" alt="" style="width: 100%;" />
					</view>
				</swiper-item>
			</swiper>
		</div>
		<view class="weather"
			style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.svg'"
					mode=""></image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>

		<uni-grid :show-border="false" :column="6" @change="changeGrid">
			<uni-grid-item v-for="(item,index) in gridData" :index="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons :type="item.icon" :size="30" style="margin: 1px;" color="#fe0067" /><br />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>

		</uni-grid>
	</view>
	<view class="changan">
		<view style="font-size: 20px; color: brown;">长安八景</view>
		<view class="item" v-for="(item,index) in seneryData">
			<view class="pic">
				<image :src="item.img" mode="">
				</image>
			</view>
			<view class="text">
				<view class="titile">{{item.name}}</view>
				<view class="msg">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG,
		headers1
	} from '../../utils/config';

	let gridData = [{
			title: '热映电影',
			icon: 'videocam'
		},
		{
			title: '长安八景',
			icon: 'star-filled'
		},
		{
			title: '每日运势',
			icon: 'image'
		},
		{
			title: '天气预报',
			icon: 'image'
		},
		{
			title: '景点',
			icon: 'image'
		}
	]
function changeGrid(e) {
		let index = e.detail.index
		console.log(index)
		switch (index) {
			case 0:
				
				break;
			case 1:
			
				break
			case 2:
				break
			default:
			case 3:
			uni.navigateTo({
					url: "/pages/eightScenic/eightScenic"
				})
				break;
		}
		
	}
	onLoad(() => {
		getImagesList()
		getWeather()
	})

	let weatherNow = ref({})
	let selectionList = ref([])

	async function getImagesList() {
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/lunbo")
		console.log(res)
		selectionList.value = res.results
	}

	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_locition
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}	
	const seneryData = ref([{
				name: "华岳仙掌",
				img: '/static/changan/s1.webp',
				content: '西岳华山为国家级风景名胜区，位于西安东120公里的华阴市南。北濒黄河、南依秦岭，奇峰突兀、巍峨壮丽，以“险、奇、峻、绝、幽”而名冠天下'
			},
			{
				name: "骊山晚照",
				img: '/static/changan/s2.jpg',
				content: '骊山位于陕西临潼区城南地区，西距西安市25公里。是秦岭东端的一个支脉，海拔800米，东西长约5公里，南北宽约3公里,最高峰仁宗庙海拔1256米。'
			},
			{
				name: "灞柳风雪",
				img: '/static/changan/s3.webp',
				content: '唐朝时，在灞桥上设立驿站，凡送别亲人与好友东去，多在这里分手，流传着“年年伤别，灞桥风雪”的词句，“灞桥风雪”从此被喻为“关中八景”之一。'
			},
			{
				name: "曲江流饮",
				img: '/static/changan/s4.jpg',
				content: '每当新科进士及第、总要在曲江赐宴。新科进士在这里乘兴作乐，放杯至盘上，放盘于曲流上，轻漂漫泛转至谁前。谁就执杯畅饮遂成一时盛事“曲江流饮”由此得名。'
			},
			{
				name: "雁塔晨钟",
				img: '/static/changan/s5.jpg',
				content: '小雁塔内有一口金代铸成的大铁钟，据说只要把亲人的名字和去处写在一张黄笺上，钟声就会把思念之情传到千里之外的亲人耳中.因此“雁塔晨钟"被誉为关中八景之一。'
			},
			{
				name: "咸阳古渡",
				img: '/static/changan/s6.jpg',
				content: '咸阳古渡”建筑于明嘉靖年间，渡口处建有一座木桥，通陇通蜀，过客众多，为秦中第一渡。“咸阳古渡”为古长安通往西北西南的咽喉要道，处于十分重要的地理位置。'
			},
			{
				name: "草堂烟雾",
				img: '/static/changan/s7.jpg',
				content: '草堂寺，相传始建于晋代。传说当年井中央有石一块，每见一蛇卧石上，辄有白雾冲天而上缭绕于帝都长安，因而被称“烟雾井”，形成 “草堂烟雾”。'
			},
		])
</script>
<style lang="scss">
	.lunbo {
		width: 100%;
		height: 380rpx;
	}
	.changan .item {
			width: 700rpx;
			height: 250rpx;
			border: 1px solid #ccc;
			border-radius: 10px;
			box-shadow: 3px 3px 3px #ccc;
			margin: 10rpx;
			display: flex;
		}
	
		.changan .item .pic {
			width: 220rpx;
			height: 220rpx;
			padding: 10rpx;
		}
	
		.changan .item .pic image {
			width: 100%;
			height: 100%;
		}
	
		.changan .item .text {
			width: 480rpx;
		}
	
		.changan .item .titile {
			text-align: center;
			color: red;
			font-weight: bold;
		}
	
		.changan .item .msg {
			color: #c3ccb3;
			font-size: 29rpx;
		}
</style>